<template>
  <el-card>
    <template #header>
      <div class="header">
        <span class="header_title">{{ title }}</span>
        <div>
          <el-button type="primary" icon="Search" @click="handleSearch"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="handleReset">重置</el-button>
        </div>
      </div>
    </template>
    <el-form
      :model="formData"
      ref="formRef"
      v-bind="mergeFormProps"
      @keyup.enter="isEnterSearch && getList()"
    >
      <el-row :gutter="gutter">
        <el-col
          v-for="item in searchColumnList"
          :key="item.searchProp || item.prop"
          v-bind="getLayoutConfig(item)"
        >
          <el-form-item
            v-bind="item"
            :label="getFormLabel(item)"
            :prop="getFormProp(item)"
          >
            <FormItem
              v-model:formData="formData[getFormProp(item)]"
              v-bind="item.formItem"
              :prop="getFormProp(item)"
              :label="getFormLabel(item)"
            ></FormItem>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="expand_box" @click="isExpand = !isExpand">
      <el-icon size="16">
        <ArrowUp v-if="isExpand" />
        <ArrowDown v-else />
      </el-icon>
      <span>{{ isExpand ? '收起' : '展开' }}</span>
    </div>
  </el-card>
</template>

<script setup>
import { ref, computed } from 'vue'
import FormItem from './FormItem.vue'
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  // 表单属性
  formProps: {
    type: Object,
    default: () => ({}),
  },
  // 间隙
  gutter: {
    type: Number,
    default: 12,
  },
  // 布局配置
  layoutConfig: {
    type: Object,
    default: () => ({
      xs: 12,
      sm: 8,
      md: 6,
      lg: 4,
      xl: 4,
    }),
  },
  searchColumnList: {
    type: Array,
    default: () => [],
  },
  // 回车进行查询操作
  isEnterSearch: {
    type: Boolean,
    default: true,
  },
  getList: {
    type: Function,
    required: true,
  },
})
const formData = defineModel()
const formRef = ref()
const isExpand = ref(false)
const pageConfig = defineModel('pageConfig')
const mergeFormProps = computed(() => {
  return Object.assign(
    {
      hideLabel: true,
    },
    props.formProps
  )
})
const getLayoutConfig = (item) => {
  let newConfog = { ...props.layoutConfig, ...item.layoutConfig }
  if (item.times) {
    for (const key in newConfog) {
      if (Object.prototype.hasOwnProperty.call(newConfog, key)) {
        const element = newConfog[key]
        newConfog[key] = element * item.times
      }
    }
  }
  return newConfog
}

const handleSearch = () => {
  props.getList()
}
const handleReset = () => {
  formRef.value.resetFields()
  // 单独清除时间区间格式的字段
  props.searchColumnList.forEach((item) => {
    if (Array.isArray(item.formItem.splitField)) {
      item.formItem.splitField.forEach((itm) => {
        formData.value[itm] = undefined
      })
    }
  })
  pageConfig.value.currentPage = 1
  pageConfig.value.pageSizes = 10
  props.getList()
}

// 获取表单label
const getFormLabel = (item) => {
  if (props.formProps.hideLabel) {
    return ''
  }
  return item.formItem?.label || item.label
}
// 获取表单prop
const getFormProp = (item) => {
  return item.formItem?.prop || item.prop
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  &_title {
    font-size: 16px;
    font-weight: bold;
  }
}

.expand_box {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  font-size: 12px;
  color: #409eff;
  cursor: pointer;
}
</style>
